<template>
  <div>
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.go(-1)" />
    <div class="rent-info">房源信息</div>
    <van-form @submit="onSubmit">
      <van-cell
        title="小区名称"
        is-link
        :value="msgValue ? msgValue : '请输入小区名称'"
        to="/search"
      />
      <router-view></router-view>
      <van-field v-model="value1" label="租金" placeholder="请输入租金/月">
        <template #label><span class="rent-infos">租金</span></template>
        <template #extra><span class="rent-extra">￥/月</span></template>
      </van-field>
      <van-field v-model="value2" placeholder="请请输入建筑面积">
        <template #label><span class="rent-infos">建筑面积</span></template>
        <template #extra> <span class="rent-extra">㎡</span> </template>
      </van-field>
      <van-field
        readonly
        clickable
        :value="value10"
        @click="showPicker = true"
        input-align="right"
        label="户型"
        placeholder="请选择"
      >
        <template #extra>
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="arrow-right-copy-copy"
            size="18px"
            color="#7f7f80"
          />
        </template>
      </van-field>
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns1"
          @cancel="showPicker = false"
          @confirm="onConfirm1"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        :value="value11"
        @click="showPickers = true"
        input-align="right"
        label="所在楼层"
        placeholder="请选择"
      >
        <template #extra>
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="arrow-right-copy-copy"
            size="18px"
            color="#7f7f80"
          /> </template
      ></van-field>
      <van-popup v-model="showPickers" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns2"
          @cancel="showPickers = false"
          @confirm="onConfirm2"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        :value="value12"
        @click="showPickeres = true"
        input-align="right"
        label="朝向"
        placeholder="请选择"
      >
        <template #extra>
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="arrow-right-copy-copy"
            size="18px"
            color="#7f7f80"
          /> </template
      ></van-field>
      <van-popup v-model="showPickeres" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns3"
          @cancel="showPickeres = false"
          @confirm="onConfirm3"
        />
      </van-popup>
      <div class="house-desc">
        <van-field label="房屋标题" />
        <van-field
          v-model="value3"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        />
      </div>
      <van-field label="房屋图像" />
      <van-uploader class="rent-loader" v-model="uploader" />
      <van-field label="房屋配置" />
      <van-grid clickable :column-num="5" :border="false" class="grids">
        <van-grid-item
          v-for="(value, key) in icons"
          :key="key"
          @click="changeClass(key)"
          :class="{ active: classColor.includes(key) }"
        >
          <van-icon
            class="iconfont"
            class-prefix="icon"
            size="23"
            :name="value"
          />
          <p>{{ key }}</p>
        </van-grid-item>
      </van-grid>
      <div class="house-desc">
        <van-field label="房屋描述" style="border-bottom: 1px solid #ddd" />
        <van-field
          v-model="value4"
          rows="5"
          autosize
          type="textarea"
          placeholder="请输入房屋描述信息"
          class="rent-field"
        />
      </div>
      <div class="button-style">
        <van-button type="primary" class="buttons">提交</van-button>
      </div>
    </van-form>
    <van-button type="default" class="buttones" @click="changeQu"
      >取消</van-button
    >
  </div>
</template>

<script>
export default {
  name: 'RentPage',
  data () {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      icons: {
        衣柜: 'yigui-hui',
        洗衣机: 'xiyiji',
        空调: 'kongdiao',
        天然气: 'tianranqi',
        冰箱: 'bingxiang',
        暖气: 'nuanqi',
        电视: 'dianshi',
        热水器: 'reshuiqi',
        宽带: 'wifi',
        沙发: 'haofangtuo400iconfont2shafa'
      },
      value10: '',
      value11: '',
      value12: '',
      showPicker: false,
      showPickers: false,
      showPickeres: false,
      columns1: ['一室', '二室', '三室', '四室', '四室+'],
      columns2: ['高楼层', '中楼层', '低楼层'],
      columns3: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      uploader: [],
      msgValue: this.$route.query.value,
      classColor: []
    }
  },
  methods: {
    onConfirm1 (value) {
      this.value10 = value
      this.showPicker = false
    },
    onConfirm2 (value) {
      this.value11 = value
      this.showPickers = false
    },
    onConfirm3 (value) {
      this.value12 = value
      this.showPickeres = false
    },
    // form表单
    onSubmit () {
      console.log(111)
    },
    changeClass (key) {
      const str = this.classColor.includes(key)
      if (!str) {
        this.classColor.push(key)
      } else {
        this.classColor = this.classColor.filter(item => item !== key)
      }
    },
    changeQu () {
      this.$dialog
        .confirm({
          title: '标题',
          message: '放弃发布房源？'
        })
        .then(() => {
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="less">
body {
  background-color: #f5f5f9;
}
.rent-info {
  color: #21b97a;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ddd;
  padding-left: 15px;
}
.rent-infos {
  display: inline-block;
  width: 70px;
  color: #666;
  text-align: justify;
  text-align-last: justify;
}
.rent-extra {
  font-size: 14px;
  color: #888;
}
.extra-z {
  display: flex;
  align-items: center;
}
.custom-title {
  display: inline-block;
  width: 70px;
  color: #666;
  text-align: justify;
  text-align-last: justify;
}
.rent-loader {
  margin-left: 15px;
}
.rent-field {
  height: 130px;
}
.house-desc {
  background-color: #f5f5f9;
  padding: 20px 0;
}
.button-style {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  position: relative;
  .buttons {
    position: absolute;
    right: 0;
    width: 50%;
  }
}
.buttones {
  position: absolute;
  width: 50%;
  left: 0;
}
.active {
  background-color: #21b97a;
  color: #21b97a;
}
</style>
